<template>
	<view style="width: 100vw; overflow: hidden;">
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="商品详情" :autoBack="true" bgColor="transparent">
		</up-navbar>

		<view class="product_header">
			<image :src="product?.bannerImg" mode="aspectFill" class="product_header-cover" />
		</view>

		<view class="product-main relative zi2 border-box">
			<view class="product-main-data flex justify-content_space-between align-item_center">
				<view class="product-main-data-money flex align-item_baseline">
					<view class="product-main-data-money-point">
						{{product?.point || '-'}}<text>积分</text>
					</view>
					<view class="product-main-data-money-sale">
						已领：{{product?.saleCount || '-'}}
					</view>
				</view>
				<view class="product-main-data-inventory">库存{{product?.stock || '-'}}</view>
			</view>
			<view class="product-main-name">
				{{product?.title || '-'}}
			</view>
			<up-gap height="30rpx"></up-gap>
			<view class="product-main-line"></view>
			<up-gap height="34rpx"></up-gap>
			<view class="product-main-title flex align-item_center">
				商品详情
			</view>
		</view>

		<!-- 详情 -->
		<view class="product-details">
			<up-parse :content="product?.content"></up-parse>
			<up-gap height="240rpx"></up-gap>
			<!-- <image src="https://ryyf.wangjintech.cn/static/image/point/details.png"></image> -->
		</view>


		<view class="product-operation flex align-item_center justify-content_center">
			<view class="product-operation-cart" @click="joinCard">加入购物车</view>
			<view class="product-operation-receive" @click="pay">立即领取</view>
		</view>

	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import secondApi from "@/api/biz/second.js"
	import {
		msg
	} from "@/utils/tool.js"

	import {
		reactive,
		ref
	} from "vue";

	const joinCard = () => {
		const data = {
			productId: id.value,
			count: 1
		}
		secondApi.createUserShopCard(data).then(res => {
			if (res.code === 0) msg("已加入购物车");
		})
	}

	const pay = () => {
		uni.navigateTo({
			url: "/pointProduct/pay/index?id=" + id.value
		})
	}

	const id = ref()
	const product = ref();
	const getProduct = () => {
		secondApi.getProduct({
			id: id.value
		}).then(res => {
			product.value = res.data;
		})
	}
	onLoad((option) => {
		id.value = option.id;
		getProduct()
	})
</script>
<style>
	page {
		background: #1B1829;
	}
</style>
<style scoped lang="scss">
	$wh: 750rpx;

	.product-details {
		color: #FFFFFF !important;
		padding: 0 30rpx;

		image {
			width: $wh;
			height: 1125rpx;
		}
	}

	.product_header {
		width: $wh;
		height: $wh - 40rpx;

		&-cover {
			width: $wh;
			height: $wh;
		}
	}

	.product-main {
		padding: 30rpx;
		width: $wh;
		background: #1B1829;
		border-radius: 40rpx 40rpx 0 0;

		&-data {
			&-money {
				&-sale {
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
					opacity: 0.6;
					margin-left: 20rpx;
				}

				&-point {
					font-weight: 600;
					font-size: 48rpx;
					color: #FFC75C;

					text {
						font-size: 28rpx;
					}
				}
			}

			&-inventory {
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				opacity: 0.6;
			}
		}

		&-name {
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
		}

		&-line {
			width: $wh;
			height: 1rpx;
			background: #FFFFFF;
			opacity: 0.2;
		}

		&-title {
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;

			&::before {
				content: "";
				display: block;
				width: 8rpx;
				height: 32rpx;
				background: linear-gradient(180deg, #6DBFEE 0%, #4E96E9 100%);
				margin-right: 20rpx;
			}
		}
	}

	.product-operation {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 114rpx;

		view {
			width: 300rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			background-size: contain;
		}

		&-cart {
			background: url("https://ryyf.wangjintech.cn/static/image/point/cart.png") no-repeat;
		}

		&-receive {
			background: url("https://ryyf.wangjintech.cn/static/image/point/pay.png") no-repeat;
		}
	}
</style>